import React from 'react';
import { Button, Drawer } from 'antd';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Code from '@/components/Code';
import Detail from './Datasources/Detail';
import './index.less';

interface Props {
  data: any;
  visible: boolean;
  onClose: () => void;
}
export default function TimeSeriesDetail(props: Props) {
  const { t } = useTranslation('datasourceManage');
  const { data, visible, onClose } = props;

  return (
    <Drawer
      width={584}
      closeIcon={false}
      className='settings-data-source-detail-drawer'
      bodyStyle={{
        padding: '0 15px 15px',
      }}
      title=''
      placement='right'
      onClose={onClose}
      visible={visible}
      footer={
        <Button style={{ float: 'right' }} data-oid='hm2a2qg'>
          <Link to={`/help/source/edit/${data.plugin_type}/${data.id}`} data-oid='mtbsm0o'>
            {t('common:btn.edit')}
          </Link>
        </Button>
      }
      data-oid='pne6220'
    >
      <div data-oid='q23wi.f'>
        <div className='page-title' data-oid='obq:99q'>
          {t('name')}
        </div>
        <div data-oid='r4gntko'>{data.name}</div>
        <div className='page-title' data-oid='yy8n:lp'>
          {t('id')}
        </div>
        <Code data-oid='8wzgiw.'>{data.id}</Code>
        <Detail data={data} data-oid='_mzy4mj' />
        {data.description && (
          <>
            <div className='page-title' data-oid='qrarcfl'>
              {t('description')}
            </div>
            <div className='flash-cat-block' data-oid='4y_n4h8'>
              {data.description}
            </div>
          </>
        )}
      </div>
    </Drawer>
  );
}
